<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    let ctx = document.getElementById('canvas');
    // 获取webgl上下文
    let gl = ctx.getContext('webgl')
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        // 声明attribute变量 必须在main函数外面声明  （着色器是强类型语言）
        // 存储限定符 类型 变量名 分号
        // attribute变量 只能传递顶点数据，所以attribute变量只能在顶点着色器中试用
        // 声明后默认值是 vec4(0.0, 0.0, 0.0, 1.0)
        attribute vec4 aPosition;
        // 必须要存在main函数
        void main(){
            // 要绘制的点的坐标  x y z w（齐次坐标） 最终会变成这样 x/w y/w z/w
            gl_Position = aPosition;
            // 点的大小  数据类型 必须是 浮点型数据类型
            gl_PointSize = 30.0;
        }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            // 参数 rgba
            gl_FragColor = vec4(1.0, 0.0, 0.1, 1.0);
        }
    `;
    let program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    // 获取 attribute变量，必须在initShader之后
    let aPosition = gl.getAttribLocation(program, 'aPosition')
    // 赋值
    // gl.vertexAttrib4f(aPosition,0.5, 0.5, 0.0, 1.0)
    // 同族的函数 只是传入传入参数个数不同
    // gl.vertexAttrib3f(aPosition,0.5, 0.5, 0.0)
    // gl.vertexAttrib2f(aPosition,0.5, 0.5)
    // gl.vertexAttrib1f(aPosition,0.5)
    // 执行绘制
    gl.drawArrays(gl.POINTS, 0, 1);

    // 让点动起来
    let x = 0.0;
    setInterval(()=>{
        x += 0.1;
        if(x>1){
            x = 0.0;
        }
        gl.vertexAttrib1f(aPosition, x)
        // 执行绘制
        gl.drawArrays(gl.POINTS, 0, 1);
    },30)

    // let move = () => {
    //     x += 0.1;
    //     console.log('x',x)
    //     if(x>1){
    //         x = 0.0;
    //     }
    //     gl.vertexAttrib1f(aPosition, x)
    //     // 执行绘制
    //     gl.drawArrays(gl.POINTS, 0, 1);
    //     requestAnimationFrame(move)
    // }
    // move()

</script>
</html>
